<template>
    <div class="user">
        <div class="user_top">
            <img src="../assets/user.jpeg" alt="">
            <h3 v-if="islogined">{{username}}</h3>
            <h3 v-else>点击登录</h3>
            <van-icon :name="!islogined?'arrow':'cross'" @click="loginClick" />
        </div>
        <!-- 模态框 -->
        <div class="modal" v-show='isshowmodal'>
            <!-- 遮罩层 -->
            <div class="modal_bg" @click="isshowmodal=false"></div>
                <div class="modal_content">
                    <van-form @submit="onSubmit">
                        <van-field
                            v-model="username"
                            name="用户名"
                            label="用户名"
                            placeholder="用户名"
                            :rules="[{ required: true, message: '请填写用户名' }]"
                        />
                        <van-field
                            v-model="password"
                            type="password"
                            name="密码"
                            label="密码"
                            placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]"
                        />
                        <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                        </div>
                    </van-form>
                </div>
        </div>
        <!-- 九宫格 -->
        <van-grid :column-num="3">
            <van-grid-item icon="label-o" text="我的订单" />
            <van-grid-item icon="bill-o" text="优惠券" />
            <van-grid-item icon="goods-collect-o" text="礼品卡" />
            <van-grid-item icon="location-o" text="我的收藏" />
            <van-grid-item icon="flag-o" text="我的足迹" />
            <van-grid-item icon="contact" text="会员福利" />
            <van-grid-item icon="aim" text="地址管理" />
            <van-grid-item icon="warn-o" text="账号安全" />
            <van-grid-item icon="service-o" text="联系客服" />
            <van-grid-item icon="question-o" text="帮助中心" />
            <van-grid-item icon="smile-comment-o" text="意见反馈" />
        </van-grid>
    </div>
</template>
<script>

import {loginFn} from '@/utils/http'
export default {
    name:'USer',
    data(){
        return {
            islogined:false,// 定义一个状态
             username: '',// 用户名
             password: '',// 密码
             isshowmodal:false,// 模态框
            //  headImg:require('../assets/user.jpeg')
        }
    },
    created(){
        // 根据本地存储的用户信息来判断当前是否登录，如果有说明登录，否则未登录
        const userinfo = JSON.parse(localStorage.getItem('userinfo'))
        if (userinfo){
            this.islogined = true
            this.username = userinfo.username
        }
    },
    methods:{
        onSubmit(values) {
            console.log('submit',values);
            //{用户名: '啊哈哈', 密码: '123123'}
            loginFn({username:values['用户名'],pwd:values['密码']}).then((res)=>{
                console.log(res);
                if(res.errno==0){
                    // 登录成功
                    // 修改登录状态
                    this.islogined = true
                    // 将后端返回的token存储到本地
                    localStorage.setItem('token',res.data.token)
                    // 将后端返回的用户信息存储到本地
                    // 不能直接存储复杂数据类型，需转化
                    localStorage.setItem('userinfo',JSON.stringify(res.data.userInfo))
                    // 隐藏模态框
                    this.isshowmodal = false
                    this.username = res.data.userInfo.username
                    // this.headImg = res.data.userInfo.avrtar
                }else{
                    // 登录不成功
                }
            })
        },
        // 点击登录
        loginClick(){
            if(this.islogined){
                // 表示登录状态,退出登录
                // console.log(this);
                this.$dialog.confirm({
                    title:'退出账号确认',
                    message:'确认要退出吗',
                }).then(() => {
                        // 点击确认,表示要退出
                        // 删除用户信息
                        localStorage.removeItem('userinfo')
                        localStorage.removeItem('token')
                        this.islogined = false
                    })
                    .catch(() => {
                        // 点击取消
                    });
            }else{
                // 未登录时显示登录模态框
                this.isshowmodal = true
            }
        }
    }
}
</script>

<style lang='less' scoped>
.user{
    font-size: 18px;
    .user_top{
        background: #333;
        color: #fff;
        padding: 20px 10px;
        height: 70px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        img{
            width: 70px;
            height: 70px;
            display: block;
            border-radius: 50%;
            margin-right: 10px;
        }
        h3{
            flex: 1;
        }
    }
    .modal {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
    .modal_bg {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
    }
    .modal_content {
      width: 90%;
      height: 200px;
      position: absolute;
      background: #fff;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      padding-top: 40px;
    }
  }
  /deep/.van-grid-item{
      box-sizing: border-box;
      padding: 16px 8px;
  }
}
</style>